<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>部门管理</title>
	<link rel="stylesheet" href="/static/layui/css/layui.css" />
	<link rel="stylesheet" href="/static/ui/css/ui.css" />
</head>

<body class="pear-container">
	<div class="layui-card">
		<div class="layui-card-body">
			<form class="layui-form" action="">
				<div class="layui-form-item">
					<div class="layui-form-item layui-inline">
						<label class="layui-form-label">名称</label>
						<div class="layui-input-inline">
							<input type="text" name="name" placeholder="" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item layui-inline">
						<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
							<i class="layui-icon layui-icon-search"></i>
							查询
						</button>
						<button type="reset" class="pear-btn pear-btn-md" lay-filter="user-reset" lay-submit>
							<i class="layui-icon layui-icon-refresh"></i>
							重置
						</button>
					</div>
				</div>
			</form>
		</div>
	</div>
	<div class="layui-card">
		<div class="layui-card-body">
			<div class="layui-btn-group">
				<button class="layui-btn layui-btn-primary layui-border-red layui-btn-sm" id="add">
					<i class="layui-icon layui-icon-add-1"></i>
					新增
				</button>
				<button id="btnExpandAll" class="layui-btn layui-btn-sm layui-btn-normal">
					<i class="layui-icon">&#xe668;</i>展开全部
				</button>
				<button id="btnFoldAll" class="layui-btn layui-btn-sm layui-btn-warm">
					<i class="layui-icon">&#xe66b;</i>折叠全部
				</button>
			</div>
			<table id="dept-table" lay-filter="dept-table"></table>
		</div>
	</div>

	

	<script type="text/html" id="dept-bar">
			<button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
		    <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
		</script>
	<script type="text/html" id="dept-time">
			{{layui.util.toDateString(d.add_time*1000, 'yyyy-MM-dd HH:mm:ss')}}
		</script>
	<script src="../config.js"></script>
	<script src="/static/layui/layui.js"></script>
	<script src="/static/ui/ui.js"></script>
	<script>
		layui.use(['table', 'form', 'jquery', 'common', 'treeTable'], function () {
			let table = layui.table;
			let form = layui.form;
			let $ = layui.jquery;
			let common = layui.common;
			let treeTable = layui.treeTable;
			let MODULE_PATH = "./";

			let cols = [

				{
					title: 'ID',
					field: 'id',
					align: 'center'
				},
				{
					title: '部门名称',
					field: 'name',
					align: 'center'
				},
				{
					title: '所属公司',
					field: 'company',
					align: 'center'
				},
				{
					title: '添加时间',
					field: 'add_time',
					align: 'center',
					//templet: '#dept-time'
				},
				{
					title: '操作',
					toolbar: '#dept-bar',
					align: 'center',
					width: 130
				}

			];
			let insTb = treeTable.render({
				elem: '#dept-table',
				toolbar: '#dept-toolbar',
				tree: {
					iconIndex: 1,  // 折叠图标显示在第几列
					idName: 'id',  // 自定义id字段的名称
					pidName: 'pid',  // 自定义标识是否还有子节点的字段名称
					haveChildName: 'have_child',  // 自定义标识是否还有子节点的字段名称
					isPidData: true  // 是否是pid形式数据
				},
				cols : cols,
				reqData: function (data, callback) {
					let pid = data ? data.id : 0;
					_get(layui, 'user_dept/list?pid=' + pid, function (res) {
						//console.log(res)
						callback(res.list);  // 参数是数组类型
					});
				}
			})
			


			treeTable.on('tool(dept-table)', function (obj) {
				if (obj.event === 'remove') {
					window.remove(obj);
				} else if (obj.event === 'edit') {
					window.edit(obj);
				}
			});

			
			// 监听搜索操作

			form.on('submit(dept-query)', function (data) {
				treeTable.reload('dept-table', {
					where: {
						param: $('form').serialize()
					},
					page: {
						curr: 1
					}
				})
				return false;
			});
			form.on('submit(dept-reset)', function (data) {
				treeTable.reload('dept-table', {
					where: {
						param: ''
					},
					page: {
						curr: 1
					}
				});
				return false;
			})

			$("#add").click(function () {
				layer.open({
					type: 2,
					title: '新增部门',
					shade: 0.1,
					offset: 'rt',
					area: ['80%', '100%'],
					anim: 1,
					maxmin: true,
					content: MODULE_PATH + 'edit.html'
				});
			})
			// 全部展开
            $('#btnExpandAll').click(function () {
                insTb.expandAll();
            });

            // 全部折叠
            $('#btnFoldAll').click(function () {
                insTb.foldAll();
            });
			window.edit = function (obj) {
				layer.open({
					type: 2,
					title: '修改部门',
					shade: 0.1,
					offset: 'rt',
					area: ['80%', '100%'],
					anim: 1,
					maxmin: true,
					content: MODULE_PATH + 'edit.html?id=' + obj.data.id
				});
			}
			window.remove = function (obj) {
				layer.confirm('确定要删除', { icon: 3, title: '提示' }, function (index) {
					layer.close(index);
					_post(layui, 'user_dept/del', { id: obj.data.id }, res => {
						layer.msg('删除成功', { icon: 1, time: 1000 }, () => {
							obj.del();
						});
					}, err => {
						//layer.msg('删除失败',{icon:2,time:1000});
					})
				});
			}

		})
	</script>
</body>

</html>